<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板自变量使用技巧</title>
    <style>
        ul{
            list-style: none;
        }

        li:nth-of-type(odd){
            background: green;
            color: white;
        }
    </style>
</head>
<body>
    <script>
        function test() {
            return 'xiasnn';
        }

        // 可以调用函数
        let xia = `前端${test()}是大美女`;
        console.log(xia);

        
        // 可以进行运算
        let content = `${ 3 + 4}`;
        console.log(content);


        let lesson = [
            {title : 'html'},
            {title : 'css'},
            {title : 'js'}
        ];

        // 字面量嵌套
        function template() {
            return `
                <ul>${lesson.map(item => 
                    `<li>${item.title}</li>`).join("")}
                </ul>
            `;
        }

        document.body.innerHTML=template();
    </script>
</body>
</html>